<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
	margin:0;padding:0;
	background:url(image/bg.jpg) no-repeat;
	width:700px; height:420px;
}
#menu{
	height:50px;
	border-bottom:1px solid #4c4c4d;
}
.file{
	width:128px;
	height:168px;
	float:left;
	margin:10px;
	cursor:pointer;
}
.file .imgBox{
	width:128px;
	height:128px;
	background-color:#464646;
	display:block;
	vertical-align:middle;
}
.file .imgBox img{
}
.file span{
	display:block;
	text-align:center;
	color:#FFFFFF;
	background-color:#000000;
}
.topBotM{
	height:30px;
	margin-top:10px;
	margin-bottom:10px;
	border-left:1px #323232 solid;
	line-height:30px;
	display:block;
}
.topBotM img{
	cursor:pointer;
}
.row{
	text-align:center;
	width:600px;
	margin-left:auto;
	margin-right:auto;
}
</style>
<script type="text/javascript">
imageManager = {
	rowNum:0,
	files:0,
	path:"",
	read:"",
	history:[],
	historySize:-1,
	historyNum:0,
	element:"",
	selectedImage:"",
	
	init:function(elementID){
		if(imageManager.element == ""){
			imageManager.element = parent.document.getElementById(elementID);
		}
	},
	
	picClick:function(path){
		parent.imageMan.close(path);
	},
	
	close:function(){
		parent.imageMan.close();
	},
	
	clear:function(){
		parent.imageMan.close("");
	},
	
	historyBack:function(){
		if(imageManager.historySize == 0){
			alert("No Previous History");
		}else{
			imageManager.historyNum++;
			var where = imageManager.historySize - imageManager.historyNum;
			document.getElementById('path').value = imageManager.history[where];
			imageManager.path = document.getElementById('path').value;
			imageManager.path = imageManager.path.substr(1).replace('../','');
			imageManager.loadingFiles();
			imageManager.AJAX = new imageManager.XMLHttpRequest();
			imageManager.AJAX.open("GET", "imageBrowse.json.php?dir="+imageManager.path, true);
			imageManager.AJAX.onreadystatechange = imageManager.onReciveData;
			imageManager.AJAX.send(null);
		}
	},
	
	constrain:function(string, limit){
		var num = string.length;
		var rem = string.substr(limit);
		return string.replace(rem, "");
	},
	
	historyForward:function(){
		if(imageManager.historyNum == 0){
			alert("No Forward History");
		}else{
			imageManager.historyNum--;
			var where = imageManager.historySize - imageManager.historyNum;
			document.getElementById('path').value = imageManager.history[where];
			imageManager.path = document.getElementById('path').value;
			imageManager.path = imageManager.path.substr(1).replace('../','');
			imageManager.loadingFiles();
			imageManager.AJAX = new imageManager.XMLHttpRequest();
			imageManager.AJAX.open("GET", "imageBrowse.json.php?dir="+imageManager.path, true);
			imageManager.AJAX.onreadystatechange = imageManager.onReciveData;
			imageManager.AJAX.send(null);
		}
	},
	
	XMLHttpRequest:function(){
		try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
			catch (e1) {}
		try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
			catch (e2) {}
		try { return new ActiveXObject("Msxml2.XMLHTTP"); }
			catch (e3) {}
		try { return new XMLHttpRequest(); }
			catch (e4) {}
		throw new Error("This browser does not support XMLHttpRequest.");
	},

	loadingFiles:function(){
		document.getElementById('files').innerHTML = "<div style='text-align:center;margin-top:60px;'><img src='/uploader/loading.gif' /></div>";
		imageManager.rowNum = 0;
		imageManager.files = 0;
	},
	
	clearFiles:function(){
		document.getElementById('files').innerHTML = '<div id="row0" class="row"></div>';
		imageManager.rowNum = 0;
		imageManager.files = 0;
	},
	
	addFiles:function(filePath, fileName){
		if(imageManager.files != 4){
			document.getElementById('row'+imageManager.rowNum).innerHTML += '<div class="file" onclick="imageManager.picClick(\''+filePath+'\');"><span class="imgBox"><img src="resize.php?file='+filePath+'" alt="'+fileName+'" /></span><span>'+imageManager.constrain(fileName, 20)+'</span></div>';
			imageManager.files++;
		}else{
			imageManager.files = 1;
			imageManager.newRow();
			document.getElementById('row'+imageManager.rowNum).innerHTML += '<div class="file" onclick="imageManager.picClick(\''+filePath+'\');"><span class="imgBox"><img src="resize.php?file='+filePath+'" alt="'+fileName+'" /></span><span>'+imageManager.constrain(fileName, 20)+'</span></div>';
		}
	},
	addFolder:function(name){
		if(imageManager.files != 4){
			document.getElementById('row'+imageManager.rowNum).innerHTML += '<div class="file"><span class="imgBox"><img style="cursor:pointer;" src="image/FolderIcon.png" alt="'+name+'" onclick="imageManager.folderClick(\''+name+'\')" /></span><span>'+imageManager.constrain(name, 20)+'</span></div>';
			imageManager.files++;
		}else{
			imageManager.files = 1;
			imageManager.newRow();
			document.getElementById('row'+imageManager.rowNum).innerHTML += '<div class="file"><span class="imgBox"><img style="cursor:pointer;" src="image/FolderIcon.png" alt="'+name+'" onclick="imageManager.folderClick(\''+name+'\')" /></span><span>'+imageManager.constrain(name, 20)+'</span></div>';
		}
	},
	
	folderClick:function(name){
		imageManager.path += '/'+name;
		document.getElementById('path').value = imageManager.path;
		imageManager.getImages();
	},
	
	newRow:function(){
		imageManager.rowNum++;
		document.getElementById('files').innerHTML += '<div id="row'+imageManager.rowNum+'" class="row"></div>';
	},
	
	hideUpload:function(){
		document.getElementById('floatdiv').style.display = 'none';
	},
	
	showUpload:function(){
		document.getElementById('floatdiv').style.display = 'block';
	},
	
	getImages:function(){
		imageManager.loadingFiles();
		imageManager.path = document.getElementById('path').value;
		imageManager.path = imageManager.path.substr(1).replace('../','');
		imageManager.historySize++
		imageManager.history[imageManager.historySize] = '/'+imageManager.path;
		imageManager.AJAX = new imageManager.XMLHttpRequest();
		imageManager.AJAX.open("GET", "imageBrowse.json.php?dir="+imageManager.path, true);
		imageManager.AJAX.onreadystatechange = imageManager.onReciveData;
		imageManager.AJAX.send(null);
	},
	
	onReciveData:function(){
		if(imageManager.AJAX.readyState == 4){
			var readData = imageManager.AJAX.responseText;
			eval("imageManager.readData = "+readData+";");
			imageManager.clearFiles();
			for(i=0;i<imageManager.readData.folders.length;i++) {
				imageManager.addFolder(imageManager.readData.folders[i][1]);
			}
			for(i=0;i<imageManager.readData.files.length;i++) {
				imageManager.addFiles(imageManager.readData.files[i][0], imageManager.readData.files[i][1]);
			}
		}
	},
}
</script>
</head>

<body onload="imageManager.getImages();">
<div id="menu">
	<div class="topBotM" style="float:left;width:378px;" onclick="imageManager.hideUpload();">
        <img src="image/lt.jpg" alt="back" style="margin-left:20px;" onclick="imageManager.historyBack();" />
        <img src="image/gt.jpg" alt="forward" style="margin-left:20px;" onclick="imageManager.historyForward();" />
        <input id="path" type="text" style="width:240px;height:30px;margin-left:20px;top:7px;position:absolute;display:inline;color:#999;" value="/" />
        <img src="image/gt_blue.jpg" alt="Go" style="margin-left:280px;" onclick="imageManager.getImages();" />
    </div>
	<div class="topBotM" style="float:left;width:278px;">
        <img src="image/uploadButton.jpg" alt="Upload" style="margin-left:20px;margin-top:5px" onclick="imageManager.showUpload();" />
        <img src="image/close_btn.gif" alt="Close" style="margin-left:20px;margin-top:5px" onclick="imageManager.close();" />
        <img src="image/clear_btn.gif" alt="Clear" style="margin-left:20px;margin-top:5px" onclick="imageManager.clear();" />
    </div>
	<div class="topBotM" style="float:right;width:41px;text-align:right;" onclick="imageManager.hideUpload();">
        <img src="image/WM.jpg" alt="Welford Media" title="Welford Media" style="margin-right:20px;cursor:default;" />
    </div>
    <div style="clear:both;"></div>
    <div id="files" onclick="imageManager.hideUpload();" style="vertical-align:top;text-align:center;height:370px;overflow-x:hidden;">
    	<div id="row0" class="row"></div>
    </div>
</div>

<div id="floatdiv" style="display:none; position:absolute; width:410px; height:260px; left:147px; top: 100px;">
  <iframe src="http://dtp3.demodesign.co.uk/uploader/swfUploader/index.php?dir={%directory%}" width="410" height="260" allowtransparency="allowtransparency" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
</div>
</body>
</html>
